<template>
	<view class="body ns-padding-left ns-padding-right" :class="isIphoneX ? 'padding-bottom' : ''">
		<!-- 头部轮播 -->
		<view class="carousel-section" v-if="goodsBargainList.length > 0 && swiperList.length > 0">
			<swiper class="carousel" circular autoplay="true">
				<swiper-item v-for="(item, index) in swiperList" :key="index" class="carousel-item">
					<image :src="$util.img(item.adv_image)" @click="redirectTo(item.adv_url)" />
				</swiper-item>
			</swiper>
		</view>
		<view class="bargain-explain" v-if="goodsBargainList.length > 0">
			<view class="explain-title">砍价说明</view>
			<view class="group">
				<view class="group-list">
					<text>选择商品</text>
					<text>发起砍价</text>
				</view>
				<text class="iconfont iconright"></text>
				<view class="group-list">
					<text>邀请好友</text>
					<text>帮忙砍价</text>
				</view>
				<text class="iconfont iconright"></text>
				<view class="group-list">
					<text>立即出手</text>
					<text>下单购买</text>
				</view>
			</view>
		</view>
		<view class="bargain-container ns-padding-top" v-if="goodsBargainList.length > 0">
			<navigator
				:url="'/promotionpages/bargain/detail/detail?goods_id=' + item.goods_id + '&bargain_id=' + item.bargain_id"
				v-for="(item, index) in goodsBargainList"
				:key="index"
				class="bargain-item"
			>
				<view class="bargain-ad">
					<image :src="item.pic_cover_mid != null ? $util.img(item.pic_cover_mid) : $util.img('upload/uniapp/brand_default_adv.png')" class="pic"></image>
				</view>
				<view class="bargain-info">
					<view class="bargain-name ns-font-size-base">{{ item.goods_name }}</view>
					<view class="bargain-tag"><view class=" tag-baoyou" v-if="item.shipping_fee == 0">包邮</view></view>
					<view class="bargain-desc">
						<text class="ns-font-size-sm ns-text-color">
							￥
							<text class="ns-font-size-lg">{{ item.promotion_price }}</text>
						</text>
						<view class="btn-launch ns-bg-color">发起砍价</view>
					</view>
				</view>
			</navigator>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="goodsBargainList.length > 0 && pageCount > 1" />
		<view v-if="isEmpty && goodsBargainList.length == 0" class="empty">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">没有找到您想要的商品...</view>
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			swiperList: [],
			goodsBargainList: [],
			swiperIndex: '',
			pageIndex: 1,
			pageCount: 0,
			pageSize: 6,
			isEmpty: false,
			status: 'loading',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			ident: false ,//防止初始化时，触发上拉加载
			isIphoneX: false, //判断手机是否是iphoneX以上
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
		this.getSwiperList();
		this.getGoodsBarginList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getGoodsBarginList();
	},
	mixins: [http],
	methods: {
		getSwiperList() {
			this.sendRequest({
				url: 'System.Shop.advDetail',
				data: {
					ap_keyword: 'APPLET_BARGAIN_CENTER',
					export_type: 'data'
				},
				success: res => {
					if (res.code == 0) {
						let list = res.data.advs;
						this.swiperList = list;
					}
				}
			});
		},
		getGoodsBarginList() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'NsBargain.Bargain.bargainList',
				data: {
					page_index: this.pageIndex,
					page_size: this.pageSize
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let list = res.data.data;
						this.pageCount = res.data.page_count;
						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}
							this.isEmpty = false;

							if (list.length > 0) {
								this.goodsBargainList = this.goodsBargainList.concat(list);
								this.pageIndex++;
							}
						}
					}
				}
			});
		},
		redirectTo(link) {
			if (link == null || link == '') return;
			if (link.is_tabbar == 1) {
				this.$util.redirectTo(link.url, {}, 'tabbar');
			} else {
				this.$util.redirectTo(link.url);
			}
		}
	}
};
</script>

<style lang="scss">
// 最外层样式、
.body {
	background: $uni-bg-color-grey;
	// height: 100vh;
}
.padding-bottom{
	padding-bottom: 68rpx !important;
}
/* 头部 轮播图 */
.carousel-section {
	position: relative;
	padding-top: 20rpx;

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 88rpx;
		box-sizing: content-box;
	}

	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 426rpx;
		transition: 0.4s;
	}
}

.carousel {
	width: 100%;
	height: 350rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}

// 说明
.bargain-explain {
	width: 100%;
	height: auto;
	background: #ffffff;
	border-radius: $ns-border-radius;
	margin-top: $ns-margin;
	margin-bottom: $ns-margin;

	.explain-title {
		background: url()
			no-repeat center;
		background-size: contain;
		width: 214rpx;
		height: 32rpx;
		line-height: 32rpx;
		font-size: $ns-font-size-lg;
		font-weight: bold;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 20rpx;
		color: $base-color;
		padding-top: $ns-padding;
		padding-bottom: $ns-padding;
	}

	.group {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 44rpx;
		padding-right: 44rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;

		.iconfont {
			color: $base-color;
		}

		.group-list {
			width: 150rpx;
			height: 150rpx;
			border-radius: 100%;
			color: $base-color;
			font-size: $ns-font-size-base;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			background: $ns-bg-color-gray;

			text {
				line-height: 32rpx;
			}
		}
	}
}

.bargain-container {
	.bargain-item {
		background: #fff;
		margin-bottom: $ns-margin;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: $ns-padding;
	}

	.bargain-ad {
		width: 220rpx;
		height: 220rpx;
		border-radius: $ns-border-radius;

		.pic {
			width: 220rpx;
			height: 220rpx;
		}
	}

	.bargain-info {
		width: 100%;
		margin-left: $ns-margin;
		height: 220rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		align-items: flex-start;

		.bargain-pic {
			width: 120rpx;
			height: 60px;
			position: absolute;
			left: 0;
			top: 0;
			line-height: 120rpx;

			image {
				width: 120rpx;
				height: auto;
				max-height: 100%;
				vertical-align: middle;
			}
		}

		.bargain-name {
			line-height: 40rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.bargain-desc {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.bargain-tag {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.tag-list {
			background: $base-color;
			border-radius: $ns-border-radius;
			font-size: $ns-font-size-sm;
			padding: 0 $ns-padding;
			color: #ffffff;
			margin-right: $ns-margin;
		}

		.tag-baoyou {
			background: #ffffff;
			border: 1px solid $base-color;
			border-radius: $ns-border-radius;
			font-size: $ns-font-size-sm;
			padding: 0 $ns-padding;
			margin-right: $ns-margin;
			color: $base-color;
		}

		.btn-launch {
			border-radius: 30rpx;
			line-height: 60rpx;
			color: #ffffff;
			padding: 0 $ns-padding;
		}
	}
}
</style>
